<template>

    <div id="app">
        <el-row style="margin-top: 20px" :gutter="20">
            <el-col :offset="4" :span="1" style="margin-top: 10px">
                <span>时间</span>
            </el-col>
            <el-col :span="3">
                <el-date-picker
                        v-model="starttime"
                        align="right"
                        type="date"
                        placeholder="开始时间"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-col>
            <el-col :span="1" style="margin-top: 10px">
                <span>至</span>
            </el-col>
            <el-col :span="3">
                <el-date-picker
                        v-model="stoptime"
                        align="right"
                        type="date"
                        placeholder="结束时间"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-col>
            <el-col :span="1" style="margin-top: 10px">
                <span>名称</span>
            </el-col>
            <el-col :span="4">
                <el-input placeholder="输入关键字搜索" v-model="key"></el-input>
            </el-col>
            <el-col :span="1">
                <el-button type="primary" @click="search">搜索</el-button>
            </el-col>

        </el-row>

        <el-table :data="data" border stripe style="margin-top: 20px;margin-bottom: 20px">
            <!--     <el-table-column type="index">
                 </el-table-column>-->
            <el-table-column prop="id" label="活动编号">
            </el-table-column>
            <el-table-column prop="img" label="图片" min-width="100">
                <template scope="scope">
                    <el-image style="width: 200px;cursor: pointer" :src="scope.row.img" lazy
                              @click="go(scope.row)"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="活动名称">
            </el-table-column>
            <el-table-column prop="type" label="活动类型">
            </el-table-column>
            <el-table-column prop="tissue" label="所属组织">
            </el-table-column>
            <el-table-column prop="zmrs" label="招募人数">
            </el-table-column>
            <el-table-column prop="ybm" label="已报名人数">
            </el-table-column>
            <el-table-column prop="ctime" label="创建时间">
            </el-table-column>

            <el-table-column prop="state" label="操作" min-width="100">
                <template scope="scope">
                    <el-button type="primary" size="small" @click="go(scope.row)">我要参加</el-button>
                    <!--                    <el-button type="success" size="small" >分享</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
        </el-pagination>

    </div>
</template>

<script>
    var t;
    export default {
        name: "Activity",
        data() {
            return {
                data: [
                    {
                        id: 1,
                        img: 'http://jmva.jiangmen.cn/images/6.jpg',
                        title: '慰问退休医生',
                        type: '公益',
                        tissue: '外联部',
                        zmrs: '777',
                        ybm: '666',
                        ctime: '1999.05.22',
                    },
                    {
                        id: 1,
                        img: 'http://jmva.jiangmen.cn/images/7.jpg',
                        title: '慰问退休医生',
                        type: '公益',
                        tissue: '外联部',
                        zmrs: '777',
                        ybm: '666',
                        ctime: '1999.05.22',
                    }
                ],
                currentPage: 1,
                key: '',
                starttime: '',
                stoptime: '',
                endtime: '',
                pickerOptions: {

                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        created() {
            t = this;
            //网络请求
            //this.data = data;
        },
        mounted() {

        },
        methods: {
            search() {
                console.log("点了搜索")
                //
                /*this.$axios.post("/user",{
                    key:this.key,
                }).then(function (res) {
                    console.log(res)
                });*/
                this.$message.success(this.key)
            },
            handleCurrentChange(p) {
                t.currentPage = p;
                this.init();
            },
            go(b) {
                this.$router.push({
                    path:'/ActivityInfo',
                    query:{
                        id:b.id,
                    }
                })
            }
        },
        beforeDestroy() {

        },
        props: {},
        computed: {//计算属性

        },
    }
</script>

<style scoped>

</style>
